<template>
	<view>
		<UserInfoCard></UserInfoCard>
		<FilterButton :is-record="isRecord" :dateFilters="dateFilters" :active-date="activeDate"
			:selected-time-range="selectedTimeRange" @updateActiveDate="updateActiveDate"
			@time-range-selected="handleChangeTimeRange"></FilterButton>
		<view class='page-container'>

			<template v-if="dataSource && dataSource.length">
				<view v-for="(item,index) in dataSource">
					<view class="item">
						<view class="between-center">
							<view class="border-col">{{item.wardName}}</view>
							<view class="color-white">
								<view class="status-1" v-if="item.status==1">已出院</view>
								<view class="status-0" v-else>未结算</view>
							</view>
						</view>
						<view>
							<view class="start-center">
								<view class="item-title">住院患者</view>
								<view>{{item.patName}}</view>
							</view>
							<view class="start-center">
								<view class="item-title">住院号</view>
								<view>{{item.medicalRecordNo}}</view>
							</view>
							<view class="start-center">
								<view class="item-title">住院院区</view>
								<view>{{item.campusName}}</view>
							</view>
							<view class="start-center">
								<view class="item-title">住院科室</view>
								<view>{{item.departmentName}}</view>
							</view>
							<view class="start-center">
								<view class="item-title">入院日期</view>
								<view>{{item.inHospitalTime}}</view>
							</view>
						</view>
						<view v-if="item.status==1" class="flex-end">
							<!-- <ButtonRight bc="bg-1" content="住院清单" @click="toPageList(item)"></ButtonRight> -->
							<ButtonRightVue content="出院带药" @click="toPageMedication(item)"></ButtonRightVue>
						</view>
						<view v-else>
							<!-- <ButtonRight bc="bg-0" content="出院结算" @click="toPageDetail(item)"></ButtonRight> -->
						</view>
					</view>
				</view>
			</template>
			<u-empty v-else text="暂无数据" mode="favor" style="margin-top: 100rpx;"></u-empty>
		</view>
	</view>
</template>

<script>
	import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue'
	import FilterButton from '../../../components/FilterButton/FilterButton.vue'
	import ButtonRightVue from '../../../components/Button/ButtonRight.vue'
	import {
		dateFormat,
		getPastDate
	} from '../../../utils/assist'
	import {
		inHospitalOutHospitalMedical
	} from '../../../api/inHospital'
	import {
		mapGetters,
	} from 'vuex'
	export default {
		components: {
			UserInfoCard,
			FilterButton,
			ButtonRightVue
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				isRecord: true,
				activeDate: '1m',
				selectedTimeRange: '请选择时间范围',
				dataSource: [{
						wardName: '骨科二',
						departmentName: '骨伤科门诊（名医）',
						campusName: '雅安市人民医院大兴院区',
						status: 1,
						patName: '王晴晴',
						medicalRecordNo: '202506230588',
						bedNo: '2',
						inHospitalTime: '2025-06-28',
						leaveHospitalTime: '2025-07-17',
						medicationList: [{
								name: "阿司匹林肠溶片",
								num: "1",
								unit: "",
								use: "一日1次,一次1片"
							},
							{
								name: "硫酸氢氯吡格雷片",
								num: "2",
								unit: "",
								use: "一日1次,一次4片"
							},
							{
								name: "阿托伐他汀钙片",
								num: "1",
								unit: "",
								use: "一日3次,一次1片"
							}
						],
						precautions: "1、高血压患者需要终身服药，血压水平不能依据症状判定。2、 严格遵医嘱服药， 勿随便停药、 减药， 不可自行改变剂量和制;如果在服药过程中血压下降过快， 同时伴有头晕、 头昏等脑部缺血症状应积极咨询医生或药师。 调整药物。3、 自我监护: 服用氨氯地平可能会引起面部潮红、 踝部水肿等症状， 如能耐受可继续服药。 "
					},
					{
						wardName: '内科一',
						departmentName: '内分泌病科门诊（夜间）',
						campusName: '雅安市人民医院大兴院区',
						status: 1,
						patName: '王晴晴',
						medicalRecordNo: '202506230596',
						bedNo: '4',
						inHospitalTime: '2025-01-13',
						leaveHospitalTime: '2025-07-17',
						medicationList: [{
								name: "阿司匹林肠溶片",
								num: "1",
								unit: "",
								use: "一日1次,一次1片"
							},
							{
								name: "硫酸氢氯吡格雷片",
								num: "2",
								unit: "",
								use: "一日1次,一次4片"
							},
							{
								name: "阿托伐他汀钙片",
								num: "1",
								unit: "",
								use: "一日3次,一次1片"
							}
						],
						precautions: "1、高血压患者需要终身服药，血压水平不能依据症状判定。2、 严格遵医嘱服药， 勿随便停药、 减药， 不可自行改变剂量和制;如果在服药过程中血压下降过快， 同时伴有头晕、 头昏等脑部缺血症状应积极咨询医生或药师。 调整药物。3、 自我监护: 服用氨氯地平可能会引起面部潮红、 踝部水肿等症状， 如能耐受可继续服药。 "

					},
				],
				dateFilters: [{
						label: '一月内',
						value: '1m'
					},
					{
						label: '半年内',
						value: '6m'
					},
					{
						label: '一年内',
						value: '1y'
					},
					// {
					// 	label: '全部',
					// 	value: 'all'
					// },
				],
				beginTime: '',
				endTime: '',
			}
		},
		mounted() {
			this.setSelectDate()
			this.init()
		},
		methods: {
			init() {
				inHospitalOutHospitalMedical({
					// patId: this.userInfo.patId
					patId: '60686'
				}).then(res => {
					console.log(res)
				})
			},
			updateActiveDate(value) {
				this.activeDate = value;
				this.setSelectDate()
				this.init();
			},
			handleChangeTimeRange(e) {
				this.beginTime = e.startDate;
				this.endTime = e.endDate
				this.init();
			},
			setSelectDate() {
				this.endTime = dateFormat('yyyy-MM-dd', new Date())
				switch (this.activeDate) {
					case '1m':
						this.beginTime = getPastDate(1, 'month')
						break;
					case '6m':
						this.beginTime = getPastDate(6, 'month')
						break;
					case '1y':
						this.beginTime = getPastDate(12, 'month')
						break;
					case 'all':
						this.beginTime = getPastDate(120, 'month')
						break;
					default:
						// timeMatch = true;
				}
				this.beginTime = dateFormat(('yyyy-MM-dd'), new Date(this.beginTime))
			},
			toPageMedication(item) {
				// 跳转到出院带药
				uni.navigateTo({
					url: `/pages/Home/ServeHospital/LeaveHospitalMedicationDetail?item=` + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page-container {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 20rpx;
	}

	.list-name {
		width: 30%;
	}

	.status-0 {
		background: #eba242;
		padding: 3px 10px;
		border-radius: 16rpx;
	}

	.status-1 {
		background: #0cbd30;
		padding: 3px 10px;
		border-radius: 16rpx;
	}
</style>